<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8" style="margin-top:5px">
      <el-card shadow="hover">
        <div class="user">
          <img src="https://img1.baidu.com/it/u=1191341145,3629813580&fm=253&fmt=auto&app=120&f=JPG?w=500&h=500" alt="">
          <div class="userinfo">
            <p class="name">老谭</p>
            <p class="role">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登录时间:<span>2022-7-11</span></p>
          <p>上次登录的地点:<span>广东</span></p>
        </div>
      </el-card>
      <el-card style="margin-top:20px; height: 320px;" shadow="hover">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column v-for="(val, key) in tableLabel" :key="key" :prop="key" :label="val" />
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16" style="margin-top:5px">
      <div class="num">
        <el-card v-for="item in countdata" :key="item.name" shadow="hover" :body-style="{display:'flex', padding:0}">
          <component class="icons" :is="item.icon" :style="{background:item.color}"></component>
          <div class="detail">
            <p class="number">￥{{item.value}}</p>
            <p class="txt">{{item.name}}</p>
          </div>
        </el-card>
      </div>
      <!-- 折线图 -->
      <el-card style="height:180px"  shadow="hover">
        <div ref="echart" style="height:180px">
        </div>
      </el-card>
      <div class="graph">
        <!-- 柱状图 -->
        <el-card style="height:195px"  shadow="hover">
          <div ref="userchart" style="height:195px"></div>
        </el-card>
        <!-- 饼状图 -->
        <el-card style="height:195px"  shadow="hover">
          <div ref="videochart" style="height:160px"></div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import { defineComponent, getCurrentInstance, getCurrentScope, onMounted, reactive, ref } from 'vue'
// import axios from 'axios'
import * as echarts from 'echarts'
export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance()
    let tableData = ref([])
    let countdata = ref([])
    const tableLabel = {
      name: '课程',
      todayBuy: '今日购买',
      monthBuy: '本月购买',
      totalBuy: '总购买'
    }
    //首页左下数据
    const getTableList = async () => {
      // await axios.get('https://www.fastmock.site/mock/4a1c8d2ec062faa17be3c95c7bad54f3/api/home/getData').then(res => {
      //   // console.log(res)
      //   if(res.data.code === 200){
      //      tableData.value = res.data.data.tableData
      //   }

      // })
      let res = await proxy.$api.getTableData()
      // console.log(res.tableData)
      tableData.value = res.tableData
    }
    //首页右上数据
    const getCountData = async () => {
      let res = await proxy.$api.getCountData()
      // console.log(res)
      countdata.value = res
    }
    onMounted(() => {
      //获取table数据
      getTableList()
      //获取count数据
      getCountData()
      //获取echart数据
      getChartsData()
    })
    //关于echarts 表格的渲染部分
    let xOptions = reactive({
      legend: {
        // 图例文字颜色
        textStyle: {
          color: '#333'
        }
      },
      grid: {
        left: '20%'
      },
      // 提示框
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category', // 类目轴
        data: [],
        axisLine: {
          lineStyle: {
            color: '#17b3a3'
          }
        },
        axisLabel: {
          interval: 0,
          color: '#333'
        }
      },
      yAxis: [
        {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#17b3a3'
            }
          }
        }
      ],
      color: ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80', '#8d98b3'],
      series: []
    })
    let pieOptions = reactive({
      tooltip: {
        trigger: 'item'
      },
      color: ['#0f78f4', '#dd536b', '#9462e5', '#a6a6a6', '#e1bb22', '#39c362', '#3ed1cf'],
      series: []
    })

    //订单echarts配置
    let orderData = reactive({
      xData: [],
      series: []
    })
    //用户配置
    let userData = reactive({
      xData: [],
      series: []
    })
    //饼状图配置
    let videoData = reactive({
      series: []
    })

    //获取eachrts数据
    const getChartsData = async () => {
      let result = await proxy.$api.getEchartData()
      // console.log(result)
      //折线图数据
      let res = result.orderData
      // 柱状图数据
      let userRes = result.userData
      // console.log(userRes);
      //饼状图数据
      let videoRes = result.videoData

      //折线图渲染过程
      //折线图x轴
      orderData.xData = res.date
      const KeyArray = Object.keys(res.data[0])
      const series = []
      KeyArray.forEach(key => {
        series.push({
          name: key,
          data: res.data.map(item => item[key]),
          type: 'line'
        })
      })
      //折线图数据
      orderData.series = series
      xOptions.xAxis.data = orderData.xData
      xOptions.series = orderData.series
      //进行渲染
      let hEcharts = echarts.init(proxy.$refs['echart'])
      hEcharts.setOption(xOptions)

      //柱状图渲染过程
      userData.xData = userRes.map(item => item.date)
      userData.series = [
        {
          name: '新增用户',
          data: userRes.map(item => item.new),
          type: 'bar'
        },
        {
          name: '活跃用户',
          data: userRes.map(item => item.active),
          type: 'bar'
        }
      ]
      xOptions.xAxis.data = userData.xData
      xOptions.series = userData.series
      //进行渲染
      let uEcharts = echarts.init(proxy.$refs['userchart'])
      uEcharts.setOption(xOptions)

      //饼状图渲染过程
      videoData.series = [
        {
          data: videoRes,
          type: 'pie'
        }
      ]
      pieOptions.series = videoData.series
      //进行渲染
      let vEcharts = echarts.init(proxy.$refs['videochart'])
      vEcharts.setOption(pieOptions)
    }

    return {
      tableData,
      tableLabel,
      countdata
    }
  }
})
</script>

<style lang="less" scoped>
.user {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
  }
  .userinfo {
    text-align: left;
    margin-left: 40px;
    font-weight: bold;
    font-size: 20px;
    p {
      margin-top: 10px;
    }
  }
}
.login-info {
  p {
    color: #999;
    span {
      margin-left: 80px;
    }
  }
}
.num {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .el-card {
    width: 32%;
    margin-bottom: 20px;

    .icons {
      width: 80px;
      height: 80px;
      font-size: 30px;
      text-align: center;
      color: #fff;
    }
    .detail {
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .number {
        font-size: 30px;
        margin-bottom: 10px;
      }
      .txt {
        font-size: 14px;
        text-align: center;
        color: #999;
      }
    }
  }
}
.graph{
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .el-card{
    width: 48%;
  }
}
</style>
